<!--
 * @描述信息: 弹框公共组件 （上、下、左、右、中）弹出，内容自己填充！
      案例==》
        <hunk-popup :show="show" :type="'bottom'" @close="show = false">
          <div class="content" style="width:1000rpx;">
            <div style="width:100%;height:1500rpx;background:#ff0;">上部</div>
            <div style="width:100%;height:1500rpx;background:#0ff;">底部</div>
          </div>
        </hunk-popup>
-->
<template>
  <div class="popup" @touchmove.stop.prevent="stop">
    <hunk-mask :show="show" @close="$emit('close')"></hunk-mask>
    <div
      :class="{
        'popup-content': true,
        'popup-left': type == 'left',
        'popup-right': type == 'right',
        'popup-top': type == 'top',
        'popup-bottom': type == 'bottom',
        'popup-center': type == 'center',
        'popup-show': show
      }"
      :style="[contentStyle]"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
import Mask from '../mask'
export default {
  components: {
    'hunk-mask': Mask
  },
  props: {
    // 是否显示（默认不显示）
    show: {
      type: Boolean,
      default: false
    },
    // 控制从哪个方向弹出（top、bottom、left、right、center）
    type: {
      type: String,
      default: 'bottom'
    },
    // 宽度(正常传Number类型。String传的是百分比)
    maxWidth: {
      type: Number | String,
      default: 'auto'
    },
    // 高度(正常传Number类型。String传的是百分比)
    maxHeight: {
      type: Number | String,
      default: 'auto'
    },
    // 背景色
    bgColor: {
      type: String,
      default: '#fff'
    }
  },
  computed: {
    contentStyle() {
      return {
        maxWidth: typeof this.maxWidth == 'number' ? 2 * this.maxWidth + 'rpx' : this.maxWidth,
        maxHeight: typeof this.maxHeight == 'number' ? 2 * this.maxHeight + 'rpx' : this.maxHeight,
        backgroundColor: this.bgColor
      }
    }
  },
  methods: {
    stop(){}
  },
}
</script>

<style scoped lang="scss">
.popup {
  &-content {
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow-y: auto;
    transition: transform 0.3s, opacity 0.3s;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  // 从左边弹出
  &-left {
    left: 0;
    top: 0;
    height: 100%;
    max-width: 70%;
    border-radius: 0 10px 10px 0;
    transform: translate(-100%, 0);
  }
  // 从右边弹出
  &-right {
    right: 0;
    top: 0;
    height: 100%;
    max-width: 70%;
    border-radius: 10px 0 0 10px;
    transform: translate(100%, 0);
  }
  // 从上边弹出
  &-top {
    left: 0;
    top: 0;
    max-height: 70%;
    width: 100%;
    padding: 0;
    border-radius: 0 0 10px 10px;
    transform: translate(0, -100%);
  }
  // 从下边弹出
  &-bottom {
    left: 0;
    bottom: 0;
    max-height: 70%;
    width: 100%;
    border-radius: 10px 10px 0 0;
    transform: translate(0, 100%);
  }
  // 从中间弹出
  &-center {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height: 70%;
    max-width: 90%;
    border-radius: 10px;
    padding: 0;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.7);
  }
  &-show {
    transform: translate(0, 0) scale(1);
    pointer-events: auto;
    opacity: 1;
  }
}
</style>
